<template>
	<view>
		<u-tabs :list="titleData" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
		            color: 'red',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<view class="content" v-for="(item,index) in consultationData" :key="index" @click="helpCenter">
			<view class="main">
				<view class="content-left">
					<view class="content-title">{{ item.title}}</view>
				</view>
				<view class="content-right">
					<image :src="item.src" class="content-image" mode=""></image>
				</view>
			</view>
			<view class="main-fotter">
				<view class="content-time">{{ item.time }}</view>
				<view class="content-font">
					<u-icon name="eye" color="" size="26"></u-icon>
					<text class="browse">{{ item.browse }}</text>
				</view>
			</view>
			<u-line type="info"></u-line>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标签
				titleData: [{
					name: '全部'
				}, {
					name: '阅文',
				}],
				// 循环内容
				consultationData: [{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '我们不一样',
						time: '发布时间: 2021-05-18 16:56:35',
						browse: '24人浏览'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '常见问题',
						time: '发布时间: 2021-05-18 16:56:35',
						browse: '24人浏览'
					}
				]
			}
		},
		methods: {
			// 帮助中心内容跳转详情页面
			helpCenter(){
				uni.navigateTo({
					url:'/pages/index/enquireDetails/enquireDetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.content-left{
		padding: 0rpx 0rpx 0rpx 20rpx;
	}
	.content-title{
		font-size: 40rpx;
	}
	.content-content{
		font-size: 35rpx;
		color: #777777;
		margin-top: 20rpx;
	}
	.content-time{
		width: 500rpx;
		color: #A3A3A3;
		margin-left: 20rpx;
	}
	.content-right{
		padding: 0rpx 20rpx 20rpx 0rpx;
	}
	.content-image{
		width: 300rpx;
		height: 200rpx;
	}
	.content-font{
		width: 200rpx;
		display: flex;
		color: #A3A3A3;
		padding-right: 20rpx;
	}
	.main-fotter{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.browse{
		margin-left: 20rpx;
	}
</style>